<template>
  <div class="orders-address">
    <div class="y1">
      <div class="y1-left">
        <div class="y1-left-1">{{ address[0].area }}</div>
        <div class="y1-left-2">{{ address[0].address }}</div>
        <div class="y1-left-3">{{ address[0].name }}</div>
      </div>
      <div class="y1-right">
        <van-icon @click="$router.push({name:'address'})"  name="arrow" size="14px" />
      </div>
    </div>

    <div class="y2">
      <div class="y2-1"></div>
      <div class="y2-2"></div>
      <div class="y2-1"></div>
      <div class="y2-2"></div>
      <div class="y2-1"></div>
      <div class="y2-2"></div>
      <div class="y2-1"></div>
      <div class="y2-2"></div>
      <div class="y2-1"></div>
      <div class="y2-2"></div>
      <div class="y2-1"></div>
      <div class="y2-2" style="margin-right: 0;"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useAddressStore } from '@/stores/address'

const addr = useAddressStore()
const address = computed(() => {
  if (localStorage.getItem('address')) {
    return JSON.parse(localStorage.getItem('address') as string)
  } else {
    return addr.defaultId
  }
});
</script>

<style scoped>
::v-deep(.van-cell__left-icon) {
  display: none;
}
.orders-address {
  width: 100%;
  height: 100%;
}
.y1 {
  width: 100%;
  height: 102px;
  padding: 8px 16px;
  box-sizing: border-box;
  display: flex;
}
.y2 {
  width: 100%;
  height: 4px;
  /* background: orange; */
  display: flex;
  justify-content: space-between;
}
.y2-1 {
  background: #ff7967;
  border-radius: 0.05rem 0.05rem 0 0;
  flex: 1;
  height: 4px;
  transform: skew(-30deg);
  width: 22px;
  margin-right: 10px;
}
.y2-2 {
  background: #7ca8ff;
  border-radius: 0.05rem 0.05rem 0 0;
  flex: 1;
  height: 4px;
  transform: skew(-30deg);
  width: 22px;
  margin-right: 10px;
}
.y1-left {
  width: 331px;
}
.y1-left-1 {
  line-height: 30px;
  font-size: 14px;
  color: #1a1a1a;
}
.y1-left-2 {
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 700;
  line-height: 16px;
  margin-top: 4px;
  overflow: hidden;
}
.y1-left-3 {
  color: #1a1a1a;
  font-size: 14px;
  line-height: 45px;
}
.y1-right {
  line-height: 86px;
}
</style>
